<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="no">
  <meta name="format-detection" content="telephone=no">
  <title>帐号登录</title>
  <script src="static/js/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet"></head>
<body class="bgwh">
  <div class="content">
    <div class="wrapper"><a class="btn-home dib" href="/"></a>
      <div class="icon-login auto"></div>
      <div class="tab-login">
        <div class="cell tab-login-head">
          <span class="tab-login-item cell-bd active"><a class="dib" href="javascript:;">账号登录</a></span>
          <span class="tab-login-item cell-bd"><a class="dib" href="javascript:;">手机快捷登录</a></span>
        </div>
        <div class="tab-login-body">
          <dl class="mt20">
            <dd class="mt20"><input class="ui-login-input f30" type="text" placeholder="请输入手机号"></dd>
            <dd class="mt20"><input class="ui-login-input f30" type="password" placeholder="请输入密码"></dd>
            <dd class="mt20 pt20"><a id="loginToPwd" class="ui-login-btn ui-login-btn--primary ui-login-btn--medium db f32 mt10" href="javascript:;">登录</a></dd>
            <dd class="mt20 tc f24 g9 cell">
              <div class="cell-bd tl"><a class="g9" href="#">忘记密码？</a></div>
              <div class="cell-fd pr0"><a class="g-primary" href="wap/login/toRegister?forward=${forward}">去注册</a></div>
            </dd>
          </dl>
        </div>
        <div class="tab-login-body dn quick">
          <dl class="mt20">
            <dd class="mt20"><input id="phone" class="ui-login-input f30" type="text" placeholder="请输入手机号"></dd>
            <dd class="mt20 cell ui-password">
              <input class="cell-bd ui-login-input f30" type="tel" placeholder="请输入验证码">
              <a id="sendsms" class="cell-fd verified tc f28 g6" href="javascript:;">发送验证码</a>
            </dd>
            <dd class="mt20 pt20"><a id="loginToCode" class="ui-login-btn ui-login-btn--primary ui-login-btn--medium db f32 mt10" href="javascript:;">登录</a></dd>
            <dd class="mt20 tc f24 g9">还没账号？<a id="toRegister" class="g-primary" href="wap/login/toRegister?forward=${forward}">去注册</a></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <input class="forward" type="hidden" value="${forward}">
<script src="static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
<script type="text/javascript" src="static/js/login.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded',function(){
      var loginToPwd = document.querySelector('#loginToPwd');
      var loginToCode = document.querySelector('#loginToCode');   
      loginToPwd.addEventListener('click',function(){
    	  var parent  = document.querySelector('.tab-login-body')
    	  var inputs = parent.querySelectorAll('input')
    	  var phone = inputs[0].value
    	  var password = inputs[1].value
    	  var formData = new FormData()
          formData.append('phone',phone)
          formData.append('pwd',md5(password))
          if(!verified(0,inputs)) return false;
          
    	  submit('wap/login/loginToPwd',formData)
      })
      
      loginToCode.addEventListener('click',function(){
    	  var parent  = document.querySelector('.tab-login-body.quick')
    	  var inputs = parent.querySelectorAll('input')
    	  var phone = inputs[0].value
    	  var smsCode = inputs[1].value 
    	  
    	  var formData = new FormData()
          formData.append('phone',phone)
          formData.append('smsCode',smsCode)
          formData.append('type','login')
          if(!verified(1,inputs)) return false;
    	  submit('wap/login/loginToCode',formData)

      })
    });
    
    
    function submit(url,params){
    	
    	axios({
            method: 'post',
            url: url,
            data:params,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (res) {
        	var state = res.data.result.state
        	var message = res.data.result.message
        	if(state!=1){
        		return layer.open({ content: message,skin:'msg',time: 2 })
        	}
       		var d = document.querySelector(".forward").value.trim()
       		if(d != ''){location.href=d}
        }).catch(function(err){
        	console.log(err)
        	layer.open({ content: '请求失败！',skin:'msg',time: 2 }) 
        })
    }
    
    
    function verified(index,inputs){
    	var tips = '',status = false
    	
    	if(index === 0){
    		var phoneValue = inputs[0].value.trim()
        	var pwd = inputs[1].value.trim()
	    	if(phoneValue==''){
	    		tips = '手机号不能为空！'
	    	}else if(!/^1[356789]\d{9}$/.test(phoneValue)){
	    		tips = '请输入正确的手机号！'
	    	}else if(pwd==''){
	    		tips = '密码不能为空！'
	    	}else if(!/^[\d\w]{6,18}$/.test(pwd)){
	    		tips = '请输入6-18位字母数字组合的密码'
	    	}else{
	    		status = true
	    	}
    	}else{
    		var phoneValue = inputs[0].value.trim()
        	var code = inputs[1].value.trim()
    		if(phoneValue==''){
	    		tips = '手机号不能为空！'
	    	}else if(!/^1[356789]\d{9}$/.test(phoneValue)){
	    		tips = '请输入正确的手机号！'
	    	}else if(code==''){
	    		tips = '验证码不能为空！'
	    	}else if(!/^[\d]{6}$/.test(code)){
	    		tips = '请输入六位数字的验证码'
	    	}else{
	    		status = true
	    	}
    	}
    	
    	if(!status){
    		layer.open({
                content: tips,
                skin: 'msg',
                time: 2
              })
    	}
    	return status
    	
    }
    
    
 // 发验证码
    (function verifiedCode(){
      var btn = document.querySelector('.verified')
      var seconds,time

      btn.addEventListener('click',function(){
        var phone = document.querySelector('#phone')
        var phoneValue = phone.value.trim()
        var re = /^1[2-9]\d{9}$/g
        var tips = phoneValue===''?'手机号不能为空！':'输入手机号格式错误'
        if(!re.test(phoneValue)){
          return layer.open({
            content: tips,
            skin: 'msg',
            time: 2
          })
        }
        if(this.classList.contains('disabled')) return false;
        this.classList.add('disabled')
        var formData = new FormData()
        formData.append('phone',phone.value)
        formData.append('type','login')
        axios({
            method: 'post',
            url: 'wap/sms/send',
            data:formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (res) {
        	var state = res.data.result.state
        	var message = res.data.result.message
        	layer.open({ content: message,skin:'msg',time: 2 })
        	
        	if(state==1){
        		countdown()
        	}
        }).catch(function(){})

      });
      
      init()
      function init(){
        seconds = 60
        clearTimeout(time)
        btn.textContent = '发送验证码'
        btn.classList.remove('disabled')
      }

      function countdown(){
        if(seconds<=0) return init();
        seconds-=1
        btn.textContent =seconds+'s后从新获取'
        time = setTimeout(countdown,1000)
      }


    }())
    
    
</script>
</body>
</html>
